<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<style>
    .test { float: left; width: 50px; height: 50px; border: 1px solid black; }
    #borderRadius1 { border-radius: 0 0 10px 10px; }
    #borderRadius2 { border-radius: 0 0 0 10px; }
    #borderRadius3 { border-radius: 0 0 10px; }
    #borderRadius4 { border-radius: 0 10px; }
    #borderRadius5 { border-radius: 10px; }
</style>
</head>
<body>
    <pre id="console"></pre>
    <div class="test" id="borderRadius1"></div>
    <div class="test" id="borderRadius2"></div>
    <div class="test" id="borderRadius3"></div>
    <div class="test" id="borderRadius4"></div>
    <div class="test" id="borderRadius5"></div>
    <div class="test" id="NoBorderRadius"></div>
<script>
description('Test calling getPropertyValue on computed styles for border radius shorthand properties.');

shouldBe("window.getComputedStyle(document.getElementById('borderRadius1')).getPropertyValue('border-radius')", "'0px 0px 10px 10px'");
shouldBe("window.getComputedStyle(document.getElementById('borderRadius2')).getPropertyValue('border-radius')", "'0px 0px 0px 10px'");
shouldBe("window.getComputedStyle(document.getElementById('borderRadius3')).getPropertyValue('border-radius')", "'0px 0px 10px'");
shouldBe("window.getComputedStyle(document.getElementById('borderRadius4')).getPropertyValue('border-radius')", "'0px 10px'");
shouldBe("window.getComputedStyle(document.getElementById('borderRadius5')).getPropertyValue('border-radius')", "'10px'");
shouldBe("window.getComputedStyle(document.getElementById('NoBorderRadius')).getPropertyValue('border-radius')", "'0px'");
</script>
</body>
</html>
